import React, { memo } from 'react';
import { connect } from 'umi';
import { Card, Tag } from 'antd';

import {  IFilter } from '@/pages/SelfQuery/type';
import { ConnectState } from '@/models/connect';

import { OperatorFilterTypes } from '@/pages/SelfQuery/constants';
import { isLevelVisualType, getLastLevelVisualTypeVal } from '@/pages/SelfQuery/utils';

interface FilterLabelProps {
  formFilters: Array<any>;
  removeFilter: (index: number) => void;
}

const FilterLabel: React.FC<FilterLabelProps> = memo((props) => {
  const { formFilters, removeFilter } = props;
  return (
    <Card size="small" title="已筛选条件：" style={{ marginTop: 40 }}>
      {formFilters.map((f: IFilter, idx: number) => {
        let { visualType, value } = f;

        value = value.toString();
        const { operator, label } = f;
        if (operator == OperatorFilterTypes.Like) {
          value = value.replace(/%/g, '');
        }
        if (label && label !== '自定义') {
          value = label;
        }
        if(visualType === 'date' && label === '自定义') {
          value = value.replace(/ 00:00:00| 23:59:59.999/g, '').replace(/'/g, "").replace(/,/g, "~");
        }
        if (isLevelVisualType(visualType)) {
          value = getLastLevelVisualTypeVal(value);
        }


        return (
          <Tag
            closable
            color="blue"
            style={{ marginBottom: 10 }}
            key={idx}
            onClose={() => {
              removeFilter(idx);
            }}
          >
            {value}
          </Tag>
        );
      })}
    </Card>
  );
});
export default connect(({ widget }: ConnectState) => ({
  formFilters: widget.formFilters,
}))(FilterLabel);
